<template>
    <div class="footer">
        <div class="footer-con">
            <div class="footer-left">
                <slot></slot>
            </div>
            <div class="pagination">
                <el-pagination :background='true' :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes"
                               :pager-count="pageCount" :total="total" v-bind="$attrs" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"></el-pagination>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    name: 'Pagination',
    props: {
        total: {
            required: true,
            type: Number,
        },
        page: {
            type: Number,
            default: 1,
        },
        limit: {
            type: Number,
            default: 15,
        },
        pageSizes: {
            type: Array,
            default() {
                return [15, 20, 30, 50];
            },
        },
        layout: {
            type: String,
            default: 'prev, pager, next',
        },
        autoScroll: {
            type: Boolean,
            default: true,
        },
        hidden: {
            type: Boolean,
            default: false,
        },
        pageCount: {
            type: Number,
            default: 7,
        },
    },
    computed: {
        currentPage: {
            get() {
                return this.page;
            },
            set(val) {
                this.$emit('update:page', val);
            },
        },
        pageSize: {
            get() {
                return this.limit;
            },
            set(val) {
                this.$emit('update:limit', val);
            },
        },
    },
    created() {
        console.log('total', this.total)
    },
    methods: {
        handleSizeChange(val) {
            this.$emit('pagination');
        },
        handleCurrentChange(val) {
            this.$emit('pagination', val);
        },
    },
};
</script>
<style lang="scss" scoped>
.footer {
    width: 100%;
    height: 103px;
    background: #ffffff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 222;
    .footer-con {
        width: 1180px;
        height: 103px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
    }
    .footer-left{
        margin-left:130px;
    }
}
@media screen and (max-width: 1280px) {
    .footer {
        .footer-con {
            width: 924px;
        }
    }
}
</style>